<template>
  <el-breadcrumb separator-class="el-icon-arrow-right">
    <el-breadcrumb-item :to="{ path: '/index' }">装配员端</el-breadcrumb-item>
    <el-breadcrumb-item>菜品数量管理</el-breadcrumb-item>
  </el-breadcrumb>

  <div class="card_search">
    <el-input
        v-model="queryInfo.dishesName"
        class="search"
        size="large"
        placeholder="Search..."
        @blur="getGoodInfo"
		@keyup.enter='getGoodInfo'
    />
    <img src="@/assets/imgs/home/search.png" alt="" @click="getGoodInfo" style="width: 0.4rem; background-color: rgb(57,62,74); cursor: pointer;">
  </div>

  <el-table :data="goodList"
            class="table"
            :header-cell-style = "headerStyle"
            :cell-style = "cellStyle"
            :key="goodList.id"
  >
    <el-table-column prop="dishesName" label="商品名称" />
    <el-table-column prop="unitPrice" label="商品单价" />
    <el-table-column prop="capacity" label="商品数量(克)" />
    <el-table-column prop="copies" label="每份商品数量(克/份)" />
    <el-table-column prop="commodityQuantity" label="商品数量(份)" />
    <el-table-column label="菜品操作">
      <template #default="scope">
        <!--修改按钮-->
        <el-button type="primary" title="修改菜品信息" :icon="Edit" size='large' @click='dialogVisibleCg(scope.row.id)' style="border: 1px solid white; background-color: rgb(57,62,74)"></el-button>
      </template>
    </el-table-column>
  </el-table>

<!--  修改菜品数量-->
  <el-dialog
      title="修改菜品数量"
      :model-value="dialogVisibleChange"
      :close-on-click-modal= "false"
      width="50%" @close='closeChange'>
    <el-form label-width='70px' :model='changeForm' ref='changeRef'>
      <el-form-item prop="dishesName">
        <span>商品名称：&nbsp;</span>
        <el-input v-model="changeForm.dishesName" :disabled="true" style="width: 70%"/>
      </el-form-item>
      <el-form-item prop="unitPrice">
        <span>商品单价：&nbsp;</span>
        <el-input v-model="changeForm.unitPrice" style="width: 70%"/>
      </el-form-item>
      <el-form-item prop="copies">
        <span>每份商品数量：&nbsp;</span>
        <el-input v-model="changeForm.copies" style="width: 66.2%"/>
      </el-form-item>
      <el-form-item prop="capacity">
        <span>商品数量(克)：&nbsp;</span>
        <el-input v-model="changeForm.capacity" style="width: 65%"/>
      </el-form-item>
      <el-form-item>

      </el-form-item>
      <div class='item_button'>
        <span class="dialog-footer">
          <el-button @click="dialogVisibleChange = false">取 消</el-button>
          <el-button type="primary" @click="changeGoods()">确 定</el-button>
        </span>
      </div>
    </el-form>
  </el-dialog>
  <el-pagination
      @current-change="handleCurrentChange"
      background
      layout="prev, pager, next"
      :total="total"
      :current-page="queryInfo.currentPage"
      :page-size="queryInfo.pageSize"
      class="pagination-container"
  />
</template>

<script setup>
import {reactive, ref, getCurrentInstance, onMounted} from "vue";
import {
  Edit
} from '@element-plus/icons-vue'
const { proxy } = getCurrentInstance()

// 商品列表
let goodList = reactive([])
// 渲染
const total = ref(0)
const queryInfo = reactive({
  dishName: '',
  currentPage: 1,
  pageSize: 9
})
// 修改商品
let dialogVisibleChange = ref(false)
let changeForm = reactive({})
const cgId = ref('')
const changeUpload = ref('')

const headerStyle = () => {
  return {
    'font-size':'20px',
    'color': 'black',
    'text-align': 'center'
  }
}

const cellStyle = () => {
  return {
    'background-color':'rgb(57,62,74)',
    'color': 'white',
    'text-align': 'center'
  }
}
// 渲染网页
onMounted(() => {
  getGoodInfo()
})

// 获取菜品数据
const getGoodInfo = async () => {
  const {data: res} = await proxy.$http.MenuService.getGoods(queryInfo)
  if (res.code !== 200) return proxy.$message.error('获取商品列表失败')
  goodList.length = 0
  for (let i= 0; i < res.data.records.length; i++) {
    // res.data.records[i].imagesUrl =
    goodList.push(res.data.records[i])
  }
  total.value = res.data.total
}

// 根据分页器切换每页的菜品
const handleCurrentChange = val => {
  queryInfo.currentPage = val
  getGoodInfo()
}

// 修改菜品
const dialogVisibleCg = async id => {
  cgId.value = id
  const {data: res} = await proxy.$http.MenuService.getGoodDetail({'id': id})
  changeForm.dishesName = res.data.dishesName
  changeForm.copies = res.data.copies
  changeForm.capacity = res.data.capacity
  changeForm.unitPrice = res.data.unitPrice
  dialogVisibleChange.value = true
}
const changeGoods = async () => {
  const {data: res} = await proxy.$http.MenuService.changeGoods({...changeForm, id: cgId.value})
  if (res.code !== 200) return proxy.$message.error(`修改商品失败${res.msg}`)
  getGoodInfo()
  dialogVisibleChange.value = false
}
const closeChange = () => {
  dialogVisibleChange.value = false
}
</script>

<style scoped lang="scss">
.search{
  width: 25%;
}
.card_search{
  display: flex;
  justify-content: right;
}
:deep(.search .el-input__wrapper) {
  background-color: rgb(0,152,131)
}

:deep(.search .el-input__inner) {
  color: white
}

:deep(.el-input__inner) {
  &::placeholder{
    color: white;
    font-size: 16px
  }
}

:deep(.search .el-icon) {
  color: white;
}

.table {
  width: 80%;
  left: 50%;
  transform: translateX(-50%);
  box-sizing: border-box;
  padding-top: 50px;
}

:deep(.el-table__body) {
  border-collapse: separate;
  border-spacing: 0 20px;
}

:deep(.el-table__body .el-button:hover){
  color: rgb(57,62,74);
  background-color: white !important;
}

.el-pagination{
  position: absolute;
  right: 8%;
  bottom: 2%
}
</style>
